<template>
	<view class="notice-container">
		<!-- 顶部搜索框 -->
		<view class="search-header">
			<view class="search-bar">
				<view class="search-input-wrapper">
					<image class="search-icon" src="/static/icons/search.png"></image>
					<input class="search-input" v-model="keyword" placeholder="搜索公告" confirm-type="search" @confirm="handleSearch" />
					<view class="clear-btn" v-if="keyword" @click="clearSearch">
						<image class="clear-icon" src="/static/icons/clear.png"></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 公告列表 -->
		<scroll-view 
			class="notice-scroll" 
			scroll-y 
			@scrolltolower="onScrollToBottom"
			:refresher-enabled="true"
			:refresher-triggered="refreshing"
			@refresherrefresh="onPullDown"
		>
			<view class="notice-list" v-if="noticeList.length > 0">
				<view 
					class="notice-card" 
					v-for="(item, index) in noticeList" 
					:key="index" 
					@click="viewNoticeDetail(item.id)"
					:style="{ animationDelay: index * 0.05 + 's' }"
				>
					<view class="notice-content">
						<view class="notice-top">
							<text class="notice-title">{{item.title}}</text>
							<view class="notice-tag" v-if="item.isTop === 1">置顶</view>
						</view>
						<view class="notice-abstract" v-if="item.content">
							{{formatContent(item.content)}}
						</view>
						<view class="notice-info">
							<view class="notice-meta">
								<image class="notice-icon" src="/static/icons/time.png"></image>
								<text class="notice-time">{{formatDate(item.createTime)}}</text>
							</view>
							<view class="notice-arrow">
								<text class="arrow-text">查看详情</text>
								<text class="arrow-icon">›</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 加载更多 -->
				<view class="load-more" v-if="noticeList.length > 0">
					<view class="loading-spinner" v-if="loading && hasMore">
						<view class="spinner"></view>
						<text>加载中...</text>
					</view>
					<text class="load-more-text" v-else-if="!hasMore">—— 已经到底啦 ——</text>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-state" v-else-if="!loading">
				<image class="empty-image" src="/static/empty.png" mode="aspectFit"></image>
				<text class="empty-text">暂无公告</text>
				<view class="empty-tips" v-if="keyword">
					<text>换个关键词试试吧</text>
					<view class="refresh-btn" @click="clearSearch">清除搜索</view>
				</view>
			</view>
			
			<!-- 加载中状态 -->
			<view class="loading-state" v-else>
				<view class="spinner-large"></view>
				<text>加载中...</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { getNoticeList } from '@/api/notice.js';

export default {
	data() {
		return {
			pageNum: 1,
			pageSize: 10,
			total: 0,
			keyword: '',
			noticeList: [],
			loading: false,
			refreshing: false,
			hasMore: true
		}
	},
	onLoad() {
		this.loadNoticeList();
	},
	onShow() {
		// 可以选择性地在onShow中刷新数据
	},
	onPullDownRefresh() {
		this.onPullDown();
	},
	onReachBottom() {
		this.onScrollToBottom();
	},
	methods: {
		// 加载公告列表
		async loadNoticeList() {
			if (this.loading && !this.refreshing) return;
			
			this.loading = true;
			
			try {
				const params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				};
				
				if (this.keyword) {
					params.keyword = this.keyword;
				}
				
				const res = await getNoticeList(params);
				
				// 添加新数据
				if (this.pageNum === 1) {
					this.noticeList = res.data.records || [];
				} else {
					this.noticeList = [...this.noticeList, ...(res.data.records || [])];
				}
				
				this.total = res.data.total || 0;
				
				// 判断是否有更多数据
				this.hasMore = this.noticeList.length < this.total;
			} catch (error) {
				console.error('加载公告列表失败', error);
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				});
			} finally {
				this.loading = false;
				if (this.refreshing) {
					this.refreshing = false;
					uni.stopPullDownRefresh();
				}
			}
		},
		
		// 格式化日期
		formatDate(dateStr) {
			if (!dateStr) return '';
			
			const date = new Date(dateStr);
			return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
		},
		
		// 格式化内容（截取部分内容）
		formatContent(content) {
			if (!content) return '';
			
			// 移除HTML标签
			const plainText = content.replace(/<[^>]+>/g, '');
			// 移除多余空格
			const trimmedText = plainText.replace(/\s+/g, ' ').trim();
			// 截取前60个字符
			return trimmedText.length > 60 ? trimmedText.substring(0, 60) + '...' : trimmedText;
		},
		
		// 查看公告详情
		viewNoticeDetail(id) {
			uni.navigateTo({
				url: `/pages/notice/detail?id=${id}`
			});
		},
		
		// 处理搜索
		handleSearch() {
			this.pageNum = 1;
			this.noticeList = [];
			this.hasMore = true;
			this.loadNoticeList();
		},
		
		// 清除搜索
		clearSearch() {
			this.keyword = '';
			this.handleSearch();
		},
		
		// 下拉刷新
		onPullDown() {
			this.refreshing = true;
			this.pageNum = 1;
			this.noticeList = [];
			this.hasMore = true;
			this.loadNoticeList();
		},
		
		// 滚动到底部加载更多
		onScrollToBottom() {
			if (this.hasMore && !this.loading) {
				this.pageNum++;
				this.loadNoticeList();
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.notice-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f5f7fa;
}

/* 搜索区域样式 */
.search-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: #fff;
	padding: 16rpx 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.search-bar {
	margin: 10rpx 0;
}

.search-input-wrapper {
	display: flex;
	align-items: center;
	background-color: #f0f2f5;
	border-radius: 40rpx;
	padding: 15rpx 20rpx;
	transition: all 0.3s;
}

.search-input-wrapper:active {
	background-color: #e8eaed;
}

.search-icon {
	width: 36rpx;
	height: 36rpx;
	margin-right: 15rpx;
}

.search-input {
	flex: 1;
	font-size: 28rpx;
	height: 60rpx;
	color: #333;
}

.clear-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	background-color: #ddd;
}

.clear-icon {
	width: 26rpx;
	height: 26rpx;
}

/* 公告列表区域 */
.notice-scroll {
	flex: 1;
}

.notice-list {
	padding: 20rpx;
}

.notice-card {
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
	animation: fade-in 0.5s ease forwards;
	transform: translateY(20rpx);
	opacity: 0;
}

@keyframes fade-in {
	0% {
		transform: translateY(20rpx);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.notice-card:active {
	background-color: #f8f9fa;
	transform: scale(0.98);
	transition: all 0.2s;
}

.notice-content {
	padding: 24rpx;
}

.notice-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 16rpx;
}

.notice-title {
	flex: 1;
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	line-height: 1.4;
	margin-right: 16rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.notice-tag {
	min-width: 60rpx;
	height: 40rpx;
	line-height: 40rpx;
	background: linear-gradient(135deg, #ff9500, #ff5e3a);
	color: #fff;
	font-size: 22rpx;
	padding: 0 14rpx;
	border-radius: 20rpx;
	text-align: center;
	box-shadow: 0 2rpx 8rpx rgba(255, 94, 58, 0.3);
}

.notice-abstract {
	font-size: 26rpx;
	color: #666;
	line-height: 1.6;
	margin-bottom: 20rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-all;
}

.notice-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10rpx;
}

.notice-meta {
	display: flex;
	align-items: center;
}

.notice-icon {
	width: 26rpx;
	height: 26rpx;
	margin-right: 8rpx;
}

.notice-time {
	font-size: 24rpx;
	color: #999;
}

.notice-arrow {
	display: flex;
	align-items: center;
	color: #3498db;
}

.arrow-text {
	font-size: 24rpx;
}

.arrow-icon {
	font-size: 30rpx;
	margin-left: 4rpx;
}

/* 加载更多区域 */
.load-more {
	text-align: center;
	margin: 30rpx 0;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.load-more-text {
	color: #999;
	font-size: 24rpx;
}

.loading-spinner {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	font-size: 24rpx;
}

.spinner {
	width: 30rpx;
	height: 30rpx;
	border: 3rpx solid #ddd;
	border-top-color: #3498db;
	border-radius: 50%;
	margin-right: 10rpx;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 200rpx;
}

.empty-image {
	width: 240rpx;
	height: 240rpx;
	margin-bottom: 30rpx;
	opacity: 0.8;
}

.empty-text {
	font-size: 30rpx;
	color: #888;
	margin-bottom: 20rpx;
}

.empty-tips {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #999;
	font-size: 26rpx;
}

.refresh-btn {
	margin-top: 20rpx;
	padding: 12rpx 30rpx;
	background-color: #f0f2f5;
	color: #666;
	border-radius: 30rpx;
	font-size: 26rpx;
}

/* 加载中状态 */
.loading-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
	color: #666;
	font-size: 26rpx;
}

.spinner-large {
	width: 50rpx;
	height: 50rpx;
	border: 4rpx solid #e0e0e0;
	border-top-color: #3498db;
	border-radius: 50%;
	margin-bottom: 20rpx;
	animation: spin 0.8s linear infinite;
}
</style> 